<template>
	<view class="content">
		<view class="contentmain">
			<view class="search_view">
				<input placeholder="搜索"/>
				<view class="search_btn">
					<image src="../../static/imgs/sousuo.png"></image>
				</view>
			</view>
			<view class="imgMain">
				<image src="/static/imgs/hom_main.png"></image>
			</view>
		
			
			<view class="action_main">
				<view class="am_view">
					<image src="../../static/imgs/find_work.png"></image>
					<text>找工作</text>
				</view>
				<view class="am_view">
					<image src="../../static/imgs/send_work.png"></image>
					<text>发布招聘</text>
				</view>
				<view class="am_view">
					<image src="../../static/imgs/peixun.png"></image>
					<text>我要培训</text>
				</view>
				<view class="am_view">
					<image src="../../static/imgs/zhaopin.png"></image>
					<text>线上招聘</text>
				</view>
				<view class="am_view">
					<image src="../../static/imgs/daikuan.png"></image>
					<text>我要贷款</text>
				</view>
			</view>
			<view class="action_title">
				<text>职位推荐</text>
			</view>
			
			
			<view class="at_list">
				<view class="atl_view">
					<view class="atlv_head">
						<view class="atlvh_left">
							<text>办公室文员</text>
						</view>
						<view class="atlvh_right">
							<text>3.5 - 4.5K</text>
						</view>
					</view>
					<view class="atlv_company">
						<text>云南云核矿业集团西山有限公司</text>
					</view>
					<view class="atlv_address">
						<view class="atlva_left">
							<text>昆明市 · 西山区 ·前卫西路</text>
						</view>
						<view class="atlva_right">
							<text>立即联系</text>
							<image src="/static/imgs/back.png"></image>
						</view>
					</view>
				</view>
				<view class="atl_view">
					<view class="atlv_head">
						<view class="atlvh_left">
							<text>办公室文员</text>
						</view>
						<view class="atlvh_right">
							<text>3.5 - 4.5K</text>
						</view>
					</view>
					<view class="atlv_company">
						<text>云南云核矿业集团西山有限公司</text>
					</view>
					<view class="atlv_address">
						<view class="atlva_left">
							<text>昆明市 · 西山区 ·前卫西路</text>
						</view>
						<view class="atlva_right">
							<text>立即联系</text>
							<image src="/static/imgs/back.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	page{
		background: linear-gradient(180.00deg, #f0f3f8 0%, #fff 100%);
	}
	.contentmain{
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		
	}
	.imgMain{
		width: 100%;
		height: 260rpx;
		margin-top: 35rpx;
	}
	.imgMain image{
		width: 100%;
		height: 100%;
	}
	.btn_list{
		width: 100%;
	
		box-sizing: border-box;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.btn_view{
		flex: 1;
		height: 142rpx;
		border-radius: 8rpx;
		background: linear-gradient(179.77deg, #e4eaf6 0%, #ebeff9 51.04%, #f5f6fb 100%);
		box-shadow: 0 4rpx 10rpx #cecece21;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.btnv_left{
		width: 88rpx;
		height: 88rpx;
	}
	.btnv_left image{
		width: 100%;
		height: 100%;
	}
	.btn_right{
		flex: 1;
		margin-left: 18rpx;
		
	}
	.btnr_title{
		font-weight: 900;
		font-size: 32rpx;
		text-align: left;
		color: #222;
		line-height: 45rpx;
	}
	.btnr_desc{
		font-size: 24rpx;
		color: #666666;
		line-height: 32rpx;
		margin-top: 3rpx;
	}
	.action_main{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
	}
	.am_view{
	
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.am_view image{
		width: 84rpx;
		height: 84rpx;
	}
	.am_view text{
		font-size: 26rpx;
		line-height: 37rpx;
		margin-top: 16rpx;
		color: #222222;
	}
	.search_view{
		width: 100%;
		height: 64rpx;
		border-radius: 32rpx;
		background: #fff;
		border: 1rpx solid #0148da;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding-right: 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}
	.search_view input{
		flex: 1;
		height: 60rpx;
		background: #FFFFFF;
		border: 0px;
		outline: none;
		border-radius: 32rpx;
		font-size: 28rpx;
		padding-left: 30rpx;
		box-sizing: border-box;
	}
	.search_btn{
		width: 28.9rpx;
		height: 28.56rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.search_btn image{
		width: 100%;
		height: 100%;
	}
	.action_title{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 34rpx;
		font-weight: bold;
		color: #222222;
		margin-top: 40rpx;
	}
	.at_list{
		width: 100%;
		display: inline-block;
		margin-top: 20rpx;
	}
	.atl_view{
		width: 100%;
		
		border-radius: 8rpx;
		background: #fff;
		padding: 30rpx 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}
	.atlv_head{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.atlvh_left{
		font-size: 34rpx;
		color: #222222;
		font-weight: bold;
		line-height: 48rpx;
	}
	.atlvh_right{
		font-size: 30rpx;
		color: #26B785;
		line-height: 42rpx;
		font-weight: bold;
	}
	.atlv_company{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 24rpx;
		color: #666666;
		line-height: 33rpx;
		margin-top: 15rpx;
	}
	.atlv_address{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	.atlva_left{
		font-size: 24rpx;
		color: #666666;
		line-height: 33rpx;
	}
	.atlva_right{
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.atlva_right text{
		font-size: 24rpx;
		color: #A3B0CB;
		line-height: 33rpx;
	}
	.atlva_right image{
		width: 20rpx;
		height: 20rpx;
		margin-left: 6rpx;
	}
</style>
